import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './pages/Index'
import List from './pages/List'
import './index.css'
import Video from './pages/Video'
import Skill from './pages/Skill'
// let routeConfig = [
//     { path: '/', title: '博客首页', exact: true, component: Index },
//     { path: '/video/', title: '视频教程', exact: false, component: Video },
//     { path: '/skill/', title: '职场技能', exact: false, component: Skill }
// ]
function AppRouter() {
    return (
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h3>一级导航</h3>
                    <ul>
                        <li> <Link to="/">博客首页</Link> </li>
                        <li><Link to="/video/">视频教程</Link> </li>
                        <li><Link to="/skill/">职场技能</Link> </li>
                        {/* {
                            routeConfig.map((item, index) => {
                                return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                            })
                        } */}
                    </ul>
                </div>

                <div className="rightMain">
                    <Route path="/" exact component={Index} />
                    <Route path="/list/:id" component={List} />
                    <Route path="/video/" component={Video} />
                    <Route path="/skill/" component={Skill} />
                    {/* {
                        routeConfig.map((item, index) => {
                            return (<Route key={index} exact={item.exact} path={item.path} component={item.component} />)
                        })
                    } */}
                </div>
            </div>
        </Router>
    );
}

export default AppRouter;